<div class="device-list-container">
  <h2>设备列表</h2>
  
  <div class="device-grid" *ngIf="devices.length > 0; else noDevices">
    <div class="device-card" *ngFor="let device of devices">
      <div class="device-header">
        <h3>{{ device.name }}</h3>
        <span class="status-badge" [class.available]="device.status === 'Available'"
              [class.in-use]="device.status === 'InUse'"
              [class.under-repair]="device.status === 'UnderRepair'"
              [class.retired]="device.status === 'Retired'">
          {{ device.status }}
        </span>
      </div>
      
      <div class="device-details">
        <p><strong>类型:</strong> {{ device.type }}</p>
        <p><strong>序列号:</strong> {{ device.serialNumber }}</p>
        <p><strong>位置:</strong> {{ device.location }}</p>
        <p><strong>购买日期:</strong> {{ device.purchaseDate | date:'short' }}</p>
        <p><strong>保修期:</strong> {{ device.warrantyExpiry | date:'short' }}</p>
        <p *ngIf="device.lastMaintenanceDate"><strong>上次维护:</strong> {{ device.lastMaintenanceDate | date:'short' }}</p>
        <p *ngIf="device.notes"><strong>备注:</strong> {{ device.notes }}</p>
      </div>
    </div>
  </div>
  
  <ng-template #noDevices>
    <div class="no-devices">
      <p>暂无设备数据</p>
    </div>
  </ng-template>
</div> 